블로그_13_rootscan 페이지 대규모 개선

Study Tree랑 디자인 맞추기

기존 rootscan 소개 페이지가 그다지 마음에 들지 않아서
리액트의 디자인이나 애니메이션 코드를 다루는 연습을 할 겸 대폭 개선을 시작했다.
AI 도움을 받았어도 이것저것 손보면서 하느라 이틀 정도 걸렸다.

Study Tree 페이지에서 사용한 Bento Grid 레이아웃을 rootscan 페이지에도 동일하게 적용했다. 전체적인 사이트의 디자인 톤앤매너를 맞추는 목적이 컸다.

계속 고민했던 건 "웹 기능도 아니고 로컬에서 돌아가는 CLI 도구를 어떻게 웹에서 매력적으로 보여줄 것인가?"라는 점이었다.

1. 터미널 패널

가장 먼저 떠오른 건 터미널 패널이었다. 실제 CLI를 흉내내듯 커맨드를 입력하고 결과가 출력되는 흐름을 보여주면 되겠다고 생각했다.
툴의 가장 중요한 결과물인 보고서와 패치 파일을 보여주는 것도 필요했기에
처음에는 터미널 패널과 보고서 패널을 Study Tree 페이지처럼 2열 레이아웃으로 표시하려 했다.

그런데 공간이 너무 비어 보였다. rootscan이 패치 파일도 제공하니
이 패치 파일의 diff 내용도 보여주면 좋을 것 같아 최종적으로 3열 레이아웃으로 결정했다.

• 좌측(Terminal): 실시간 스캔 과정과 표시
• 중앙(Report): 분석된 취약점 리포트 미리보기
• 우측(Patch): 자동 생성된 패치 코드 미리보기

이렇게 터미널(실행) → 리포트(진단) → 패치(해결)로 이어지는 흐름을 한 화면에 구성했다.

비교적 단순한 구조라 구현 자체에 오랜 시간이 걸리진 않았고
내용과 텍스트가 많다 보니 반응형 레이아웃을 어떻게 할지 고민하고 수정하는 시간이 더 길었다.

또 툴 소개 같은 카드도 넣고 싶었는데 보고서와 패치 때문에 정보량이 너무 많았고
마땅히 넣을만한 공간이 없었다는 점 때문에 이런 세부적인 내용은 터미널의 탭으로 넣자는 아이디어를 떠올렸다.

2. 3D 파이프라인 시각화

처음엔 아키텍처를 간단한 플로우차트로 만들려다가 욕심이 좀 생겼다.
레퍼런스를 찾다가 AWS 아키텍처 이미지가 마음에 들어서 비슷한 아이소메트릭을 구현해보려 했다.

개별 객체를 일러스트레이터로 하나씩 디자인해야 하나 싶었다.
그래도 AI를 써서 SVG로 간단히 구현하는 편이 낫겠다고 봤다.

물론 말을 잘 못알아들어서 여러 차례 삽질을 했다.
오브젝트를 배치하고 데이터 입자가 흐르는 애니메이션도 넣어 꾸몄다.

터미널과 톤을 같이 가져가려고 정보성 텍스트도 비슷하게 꾸몄다.
다만 레이아웃 문제로 반응형에서 화면이 줄어들 때 여백이 조금 마음에 안 들지만
이건 나중에 수정해보기로 했다.

3. 퍼포먼스 탭

파이프라인 시각화 이후 조금 지쳐서 이대로 멈출까 싶었다.
그래도 탭이 두 개인 상태가 허전해서 세 번째 탭을 구현해보기로 했다.
뭘 넣을지 고민하다가 rootscan이 단순한 Wrapping 툴이 아니라 기존 도구보다 얼마나 빠르고 효율적인지 보여주면 좋겠다고 생각했다.

두 개의 파이프라인을 나란히 두고 실제 데이터가 처리되는 과정을 애니메이션으로 보여주기로 했다.
앞의 파이프라인 시각화와 비슷하지만 다른 느낌으로 카드가 통과하는 듯한 화면을 만들려고 했는데
뭔가 100% 마음에 들지는 않지만 그래도 의도한 바는 잘 만들어진 것 같다.

작은 내부 터미널도 구현했다.
기존에 세 가지 엔진을 순차적으로 쓸 때는 병목이 생기고 명령어도 세 번 입력해야 한다.
그 불편함을 먼저 보여주고 rootscan을 쓰면 레거시 대비 얼마나 빨리 처리되는지 드러내고 싶었다.

이렇게 시각적으로 비교해주면 굳이 긴 설명 없이도 "아, 빠르구나"를 바로 납득시킬 수 있을 거라고 생각했다.

4. 다음 개선 사항

추후 프로그램에 기능이 개선되거나 하면 별도의 탭으로 확장시키면 될 것 같다.
마찬가지로 애니메이션을 적극 활용해보는 게 좋겠다. 생각보다 재밌다.